<template>
  <div class="added-page-approval">
    <h1 class="ta-c">增值服务确认</h1>
    <div class="goods-info" >
      <el-card>
        <div slot="header" class="clearfix">
          <h3 class="">商品信息</h3>
        </div>
        <div class="goods-list" v-if="orderData && orderData.orderDetailVOS">
          <div class="goods-item" v-for="item in orderData.orderDetailVOS" :key="item.id">
            <p>
              <strong class="title">蛋糕：</strong>
              <span>{{ item.goodsName }}</span>
            </p>
            <p>
              <strong class="title">规格：</strong>
              <span>{{ item.goodsSpecs }}</span>
            </p>
            <p>
              <strong class="title">Sku码：</strong>
              <span>{{ item.skuCode }}</span>
            </p>
            <p>
              <strong class="title">价格：</strong>
              <span>{{ (item.totalPrice / 100).toFixed(2) }} 元</span>
            </p>
            <p>
              <strong class="title">数量：</strong>
              <span>{{ item.num }}</span>
            </p>
            <p>
              <strong class="title">状态：</strong>
              <span>{{ item.productionStateName }}</span>
            </p>
            <p>
              <strong class="title">商品类别：</strong>
              <el-tag>{{ item.goodsTypeName }}</el-tag>
            </p>
            <p>
              <strong class="title">祝福语：</strong>
              <span>{{ item.blessings }}</span>
            </p>
          </div>
        </div>
      </el-card>
    </div>

    <div class="order-info mt-20">
      <el-card class="">
        <div slot="header" class="clearfix">
          <h3 class="">订单信息</h3>
        </div>
        <div class="order-info-content">
          <p>
            <strong class="title">后台单号：</strong>
            <span>{{ orderData.xmbzNo }}</span>
          </p>
          <p>
            <strong class="title">平台单号：</strong>
            <span>{{ orderData.platformOrderId }}</span>
          </p>
          <p>
            <strong class="title">平台门店：</strong>
            <span>{{ orderData.merchantName }}</span>
          </p>
          <p>
            <strong class="title">收货人：</strong>
            <span>{{ orderData.receiverName }}</span>
          </p>
          <p>
            <strong class="title">收货人电话：</strong>
            <span>{{ orderData.receiverPhone }}</span>
          </p>
          <p>
            <strong class="title">下单人：</strong>
            <span>{{ orderData.bookerName }}</span>
          </p>
          <p>
            <strong class="title">下单电话：</strong>
            <span>{{ orderData.bookerPhone }}</span>
          </p>
          <p>
            <strong class="title">客户备注：</strong>
            <span>{{ orderData.customerNotes }}</span>
          </p>
          <p>
            <strong class="title">生产备注：</strong>
            <span>{{ orderData.productionNotes }}</span>
          </p>
          <p>
            <strong class="title">配送备注：</strong>
            <span>{{ orderData.deliveryNotes }}</span>
          </p>
          <p>
            <strong class="title">客服备注：</strong>
            <span>{{ orderData.customerServiceNotes }}</span>
          </p>
          <div v-if="(orderData.addedServiceVO && orderData.addedServiceVO.length)">
            <strong class="title">增值服务信息：</strong>
            <div class="d-f mt-20">
              <el-card v-for="(item, i) in orderData.addedServiceVO" :key="i" class="w-300 mr-20 mb-20 d-ib">
                <div slot="header" class="clearfix">
                  <span>{{ item.typeName }}</span>
                </div>
                <div class="lh-32">
                  <span>是否满足服务：</span>
                  <el-tag class="" :type="item.pass == '1' ? 'success' : 'danger'">{{ item.pass == '1' ? '满足' : '不满足' }}</el-tag>
                </div>
                <div class="lh-32">
                  <span>反馈原因/备注信息：</span>
                  <span class="">{{ item.passValue }}</span>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="map-info mt-20">
      <el-card class="">
        <div slot="header" class="clearfix">
          <h3 class="">配送时间和地址</h3>
        </div>
        <div class="fz-24">
          <p>
            <strong class="title">配送时间：</strong>
            <span v-if="orderData.deliveryStartTime && orderData.deliveryEndTime">{{
                `${orderData.deliveryStartTime.slice(5,
                  16)} ~ ${orderData.deliveryEndTime.slice(11, 16)}`
            }}</span>
          </p>
          <p>
            <strong class="title">仓库：</strong>
            <span>{{ `${orderData.deptName} ${orderData.mainWarehouse} ${orderData.branchWarehouse}` }}</span>
          </p>
          <p>
            <strong class="title">地址：</strong>
            <span>{{ orderData.receiverAddress }}</span>
            <el-button :class="isPhone ? 'fz-32' : ''" class="ml-36" type="primary" @click="location">定 位</el-button>
          </p>
          <orderLocationMap ref="orderLocationMap" style="height: 800px;"></orderLocationMap>
        </div>
      </el-card>
    </div>

    <div class="bottom-box">
      <div v-for="item in handledObjs" :key="item.type" class="btn-group-item">
        <span :class="isPhone ? 'fz-48 mr-20' : 'mr-20'">{{ item.label }}</span>
        <span :class="[isPhone ? 'fz-64' : '', item.approvalObj.class]" v-if="item.approvalObj">{{item.approvalObj.label}}</span>
        <template v-else>
          <el-button :class="isPhone ? 'fz-64 mr-50' : 'mr-20'" type="danger" @click="buttonDispatch({type: item.type, pass: 0})">{{ item.unagreeText }}</el-button>
          <el-button :class="isPhone ? 'fz-64' : ''" type="success" @click="buttonDispatch({type: item.type, pass: 1})">{{ item.agreeText }}</el-button>
        </template>
      </div>
    </div>

    <magicApprovalDialog ref="magicApprovalDialog" @confirm="handleDialogConfirm"></magicApprovalDialog>
    <flowerApprovalDialog ref="flowerApprovalDialog" @confirm="handleDialogConfirm"></flowerApprovalDialog>
    <bigPandaApprovalDialog ref="bigPandaApprovalDialog" @confirm="handleDialogConfirm"></bigPandaApprovalDialog>
    <innovationApprovalDialog ref="innovationApprovalDialog" @confirm="handleDialogConfirm"></innovationApprovalDialog>
  </div>
</template>

<script>
import { orderList, detailList } from "@/api/pending";
import { restoreLink } from '@/api/system/addedServices'
import magicApprovalDialog from "./magicApprovalDialog";
import flowerApprovalDialog from "./flowerApprovalDialog";
import bigPandaApprovalDialog from "./bigPandaApprovalDialog";
import innovationApprovalDialog from "./innovationApprovalDialog";
import orderLocationMap from '@/components/order-detail/components/orderLocationMap'
import { isPhone } from '@/util/util'
import { mapGetters } from "vuex";

export default {
  components: {
    magicApprovalDialog,
    flowerApprovalDialog,
    bigPandaApprovalDialog,
    innovationApprovalDialog,
    orderLocationMap
  },
  data() {
    const type = this.$route.query && this.$route.query.type
    return {
      orderId: this.$route.query && this.$route.query.orderId,
      types: type.split(','),
      type: (this.$route.query && this.$route.query.type) || '1',
      orderData: {
        orderDetailVOS: [],
        addedServiceVO: []
      },
      map: null,
      isPhone: isPhone()
    };
  },
  methods: {
    async getOrderData() {
      const orderRes = await orderList(this.getOrderParams())
      this.orderData = (orderRes.data.data && orderRes.data.data.rows && orderRes.data.data.rows[0]) || {}
      const detailListRes = await detailList({ orderId: this.orderId })
      if (detailListRes.data.data && detailListRes.data.data.length) {
        this.orderData.orderDetailVOS = detailListRes.data.data
      }
    },
    getOrderParams() {
      return {
        deptId: 0,
        id: this.orderId,
        orderTimeSort: '0',
        deliveryTimeSort: '0',
        page: 1,
        limit: 10,
        size: 10,
      }
    },
    // 提交处理
    async handleSubmit({pass, passValue, type}) {
      const params = {
        orderId: this.orderId,
        pass: pass,
        passValue: passValue,
        type: type // 服务类型
      }
      if (pass == 1) {
        // 魔术订单，同意前确认
        const confirmRes = await this.$confirm(
          "请确认是否满足？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          })
      }
      restoreLink([params]).then(res => {
        if (res.data && res.data.code == 200) {
          this.orderData.addedServiceVO = this.orderData.addedServiceVO.concat([params])
          const typeDialogMap = {
            1: 'magicApprovalDialog',
            2: 'flowerApprovalDialog',
            3: 'bigPandaApprovalDialog',
            6: 'innovationApprovalDialog',
          }
          if (this.$refs[typeDialogMap[type]]) {
            this.$refs[typeDialogMap[type]].hide()
          }
          this.$confirm('提交成功，确认是否关闭窗口', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            window.close()
          })
        }
      })
    },
    buttonDispatch({type, pass}) {
      if (type == 1) {// 魔术
        if (pass == 1) {
          this.handleSubmit({type, pass: 1, passValue: '同意'})
        } else {
          this.$refs['magicApprovalDialog'].show({type})
        }
      } else if (type == 2) {// 鲜花
        if (pass == 1) {
          this.handleSubmit({type, pass: 1, passValue: '满足'})
        } else {
          this.$refs['flowerApprovalDialog'].show({type})
        }
      } else if (type == 3) {// 超大熊猫人
        if (pass == 1) {
          this.handleSubmit({type, pass: 1, passValue: '同意'})
        } else {
          this.$refs['bigPandaApprovalDialog'].show({type})
        }
      } else if (type == 6) {// 创新服务
        if (pass == 1) {
          this.handleSubmit({type, pass: 1, passValue: '同意'})
        } else {
          this.$refs['innovationApprovalDialog'].show({type})
        }
      }
    },
    handleDialogConfirm({type, passValue}) {
      this.handleSubmit({pass: 0, type, passValue})
    },
    location() {
      this.$refs.orderLocationMap.setCenter([this.orderData.longitude, this.orderData.latitude])
    }
  },
  computed: {
    ...mapGetters(['addedServicesTypeMap']),
    handledObjs() {
      return this.types.map(type => {
        const approvalMap = {
          0: {
            label: '已拒绝',
            class: 'c-red'
          },
          1: {
            label: '已同意',
            class: 'c-70bd46'
          },
        }
        const data = this.orderData.addedServiceVO && this.orderData.addedServiceVO.find(item => item.type == type)
        return {
          type,
          data,
          label: this.addedServicesTypeMap[type],
          agreeText: type == 2 ? '自 营' : '同 意',
          unagreeText: type == 2 ? '不满足' : '拒 绝',
          approvalObj: approvalMap[data && data.pass]
        }
      })
    },
  },
  mounted() {
    this.getOrderData().then(() => {
      this.$refs.orderLocationMap.initMapData(this.orderData)
    })
  }
};
</script>
<style lang="scss" scoped>
.added-page-approval {
  padding: 0 50px 160px 50px;

  .goods-info {
    .goods-list {
      .goods-item {
        padding: 10px 25px;
        background: #efefef;
        margin-bottom: 10px;

        .title {
          display: inline-block;
          width: 80px;
          margin-right: 5px;
          text-align: right;
        }
      }
    }
  }

  .order-info {
    .order-info-content {
      padding: 10px 25px;
      background: #efefef;
      margin-bottom: 10px;

      .el-row {
        line-height: 36px;
      }
    }
  }

  #orderMap {
    width: 100%;
    height: 800px;
  }

  .bottom-box {
    position: sticky;
    box-shadow: 0 0 10px 0px rgba($color: #000000, $alpha: 0.5);
    bottom: 0;
    left: 0;
    z-index: 999;
    background-color: #fff;
    margin-top: 30px;
    .btn-group-item {
      padding: 20px;
      &:not(:last-child) {
        border-bottom: 2px solid #ddd;
      }
    }
  }
}
</style>